<!--  -->
<template>
  <div class="about">
    <img src="../assets/images/sharebg.png" id="sharebg" style="display:none">
    <router-link to="/">
      <img src="../assets/images/homeicon.png" class="homeicon">
    </router-link>
    <div class="compose_share" v-show="ifsharesingle" @click="ifsharesingle=false">
      <canvas id="myCanvas" class="myCanvas" style="border:1px solid #d3d3d3;display:none" width="1875" height="3557">
      </canvas>
      <img :src="canvas_toimage" id="canvas_toimage">
      <div class="tip">长按图片保存分享~</div>
    </div>
    <div class="share" :style="{'display':ifusershare?'block':'none'}" @click="ifusershare=false">
      <img src="../assets/images/share.png" class="sharepic">
    </div>
    <div class="score">
      <img src="../assets/images/congratulation.png" width="200px" style="margin-bottom:20px">
      <img src="../assets/images/scoretitle.png" width="200px">
      <div class="score_detail" id="score">
        <div class="time">
          <div class="usetime">{{user_time}}</div>
          <div>用时</div>
        </div>
        <div class="user_score">
          <div class="score_style">{{score}}

            <span style="font-size:20px">分</span>
          </div>
          <div class="score_button">
            <el-button @click="solveshare">保存图片</el-button>
            <el-button type="warning" @click="ifusershare=true">分享</el-button>
            <router-link to="/exam" style="margin-left: 10px;">
              <el-button>重新答题</el-button>
            </router-link>
          </div>
        </div>
      </div>
    </div>
    <img src="../assets/images/scorebottom.png" class="cloud">
    <img src="../assets/images/award.png" class="award">
  </div>
</template>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
  import {
    post
  } from '../assets/utils/axiosRequest'
  import html2canvas from 'html2canvas';
  export default {
    data() {
      return {
        name: "",
        phone: "",
        groupname: "",
        user_time: "00:30",
        score: 100,
        ifusershare: false,
        ifsharesingle: false,
        canvas_toimage: ""
      };
    },

    created() {
      if (this.$route.query.score) {
        this.score = this.$route.query.score
        var user_second = Number(this.$route.query.usertime)
        this.user_time = this.secondToDate(user_second)
      } else {
        this.getUserScore()
      }
    },
    methods: {
      sharesingle() {
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        var img = document.getElementById("sharebg");
        ctx.drawImage(img, 0, 0, 1875, 3557);
        ctx.fillStyle = "orange";
        ctx.fillRect(200, 1100, 1475, 400);
        ctx.fillStyle = "#2d3e4f";
        ctx.textBaseline = 'top';
        ctx.font = "bold 120px ‘微软雅黑’";
        ctx.fillText(`用时${this.user_time}`, 680, 1250);
        ctx.fillStyle = "white";
        ctx.fillRect(200, 1475, 1475, 800);
        ctx.fillStyle = "red";
        ctx.textBaseline = 'top';
        ctx.font = "bold 300px ‘微软雅黑’";
        ctx.fillText(`${this.score}分`, 650, 1720);

        let imageurl = c.toDataURL('image/png')
        //  resolve(imageurl)
        this.ifsharesingle = true
        this.canvas_toimage = imageurl
      },
      async solveshare() {
        try {
          let imageurl = await this.sharesingle()
          let dataImg = document.getElementById("canvas_toimage")
          try {
            // dataImg.src = imageurl
            this.ifsharesingle = true
          } catch (e) {
            console.log(e);
          }
          $("#canvas_toimage").show()
          let urlImg = dataImg.src //urlImg为img路径
          console.log(urlImg)
        } catch (error) {
          console.log(error)
        }
      },
      getUserScore() {
        var that = this
        let data = new FormData();
        var userIdentify = localStorage.getItem("WZTLUNIONID")
        data.append('eventId', '3');
        data.append('userIdentify', userIdentify);
        post("/gt-contest/contest/getScore", data).then(res => {
          this.score = res.result.score
        })
      },
      secondToDate(result) {
        var h = Math.floor(result / 3600) < 10 ? '0' + Math.floor(result / 3600) : Math.floor(result / 3600);
        var m = Math.floor((result / 60 % 60)) < 10 ? '0' + Math.floor((result / 60 % 60)) : Math.floor((result / 60 %
          60));
        console.log(m)
        var s = Math.floor((result % 60)) < 10 ? '0' + Math.floor((result % 60)) : Math.floor((result % 60));
        console.log(m + ":" + s)
        return result = m + ":" + s;
      },
      handleSelect(key, keyPath) {
        //  console.log(key, keyPath);
      }
    }
  }
</script>
<style scoped lang="less">
  .about {
    width: 100%;
    height: 100%;
    background: url('../assets/images/bg.png');
    background-size: 100% 100%;
    position: relative;

    /deep/ .el-input__inner {
      background: #ffffff00 !important;
      border: 0;
    }

    /deep/ .el-button {
      padding: 12px 10px;
    }

    .homeicon {
      position: fixed;
      bottom: 10px;
      right: 10px;
      width: 40px;
      z-index: 3;
    }

    .share {
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.7);
      position: absolute;
      top: 0;
      left: 0;
      display: none;
      z-index: 4;

      .sharepic {
        position: absolute;
        right: 0;
        width: 200px;
      }
    }

    .compose_share,
    .compose_award {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.3);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 5;

      img {
        width: 70%;
      }

      .tip {
        color: white;
      }
    }

    .cloud {
      width: 100%;
      position: fixed;
      bottom: 0;
      z-index: 1;
      left: 0;
    }

    .award {
      position: absolute;
      right: 0;
      top: 0;
      width: 150px;
    }

    .bluebg {
      z-index: 2;
    }

    .score {
      width: 70%;
      margin: 0 auto;
      display: flex;
      justify-content: flex-start;
      flex-direction: column;
      padding-top: 40px;

      .score_detail {
        width: 100%;
        margin: 0 auto;
        border-radius: 5px;
        overflow: hidden;
        z-index: 2;

        .time {
          background-image: linear-gradient(to right, #fccb5e, #fab65b);
          display: flex;
          align-items: baseline;
          justify-content: center;
          padding: 30px 0;

          .usetime {
            font-size: 40px;
            font-weight: bold;
          }
        }

        .user_score {
          background: #ffffff;
          padding: 10px 0;

          .score_style {
            font-size: 70px;
            font-weight: bold;
            color: red;
            font-style: italic;
            margin: 30px 0;
          }
        }
      }
    }
  }

  @media screen and (max-width: 400px) {
    .about .score {
      width: 60%;
    }

    .about .award {
      width: 100px;
    }

    /deep/ .el-button {
      padding: 8px 5px !important;
      font-size: 12px;
    }

    .about .score .score_detail .user_score .score_style {
      font-size: 55px;
    }

    .about .score .score_detail .time .usetime {
      font-size: 30px;
    }
  }
</style>